﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxChart Stacked Pyramid Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { Index: '1', SerieA: -30, SerieB: -10, SerieC: -25 },
                    { Index: '2', SerieA: -25, SerieB: -25, SerieC: 10 },
                    { Index: '3', SerieA: 30, SerieB: 0, SerieC: 25 },
                    { Index: '4', SerieA: 35, SerieB: 25, SerieC: 45 },
                    { Index: '5', SerieA: 0, SerieB: 20, SerieC: 25 }
                ];

            // prepare jqxChart settings
            var settings = {
                title: "Stacked Pyramid chart",
                description: "This example demonstrates stacked pyramid chart with horizontal orientation",
                enableAnimations: false,
                showLegend: true,
                padding: { left: 15, top: 15, right: 15, bottom: 15 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                    {
                        flip: true,
                        dataField: 'Index',
                        tickMarks: {
                            visible: true,
                            interval: 1
                        },
                        gridLines: {
                            visible: true,
                            interval: 1
                        }
                    },
                valueAxis:
                {
                    flip: true,
                    labels: { horizontalAlignment: 'right' }
                },
                colorScheme: 'scheme06',
                seriesGroups:
                    [
                        {
                            orientation: 'horizontal',
                            type: 'stackedcolumn',
                            columnsGapPercent: 50,
                            seriesGapPercent: 0,
                            columnsTopWidthPercent: 0,
                            columnsBottomWidthPercent: 100,
                            series: [
                                    { dataField: 'SerieA', displayText: 'Serie A' },
                                    { dataField: 'SerieB', displayText: 'Serie B' },
                                    { dataField: 'SerieC', displayText: 'Serie C' }
                                ]
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:850px; height:500px;"/>
</body>
</html>
